<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery-1.6.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet"
	href="css/start/jquery-ui-1.8.16.custom.css" type="text/css" />

<script type="text/javascript">
	$(document).ready(function() {
		$("#btnRegister").button()
		.click(function() {
		
			if (($("#txtUsername").val() == "") ||
					($("#txtPassword").val() == "") || 
					($("#txtName").val() == "")) {
				alert ('Please fill in all the required fields');
			}
			else {
			
				if ($("#selGender").val() == "optMale")
					gender = "Male";
				else //if ($("#selGender").val() == "optFemale")
					gender="Female"; 
			
				$.ajax({
					type: "GET",
					url: "PhaseBookServlet",
					data: "op=register&userName=" +	$("#txtUsername").val() + 
						"&password=" + $("#txtPassword").val() +
						"&name=" + $("#txtName").val() +
						"&age=" + $("#txtAge").val() +
						"&gender=" + gender +
						"&locality=" + $("#txtLocality").val(),
					success: function(result){
						result = result.trim();

						if (result == "OK") {
							window.location.href = "MainPage.jsp?userName=" + $("#txtUsername").val();
						}
						else {
							alert ('Ocorreu um erro');
						}
					}
				});
			}
		});
	});
	
</script>

<style type="text/css">

.ui-button-text{ font-size:0.8em !important; }

*{
	font-size:12px !important;
}
</style>

</head>
<body>
	<table class="ui-widget ui-corner-all">
		<tr>
			<td>Email:</td>
			<td>*<input type="text" id="txtUsername" /></td>
		</tr>
		<tr>
			<td>Password:</td>
			<td>*<input type="password" id="txtPassword" /></td>
		</tr>
		<tr/>
		<tr>
			<td>Name:</td>
			<td>*<input type="text" id="txtName" /></td>
		</tr>
		<tr>
			<td>Gender:</td>
			<td>
			<select id="selGender" >
				<option value="optMale">Male</option>
				<option value="optFemale">Female</option>
			</select></td>
		</tr>
		<tr>
			<td>Age:</td>
			<td><input type="text" id="txtAge" /></td>
		</tr>
		<tr>
			<td>Locality:</td>
			<td><input type="text" id="txtLocality" /></td>
		</tr>
		<tr>
			<td colspan="2"><div id="btnRegister">Register</div></td>
		</tr>

	</table>

</body>
</html>